import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {screenOptions} from './options';

import Home from '@/pages/home';
import Mine from '@/pages/mine';
import Setting from '@/pages/setting';
import Address from '@/pages/setting/address';

const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();

const BottomTabScreen = () => (
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }}>
    <Tab.Screen name="首页" component={Home} />
    <Tab.Screen name="我的" component={Mine} />
  </Tab.Navigator>
);

const Router = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={screenOptions}>
        <RootStack.Screen
          name="BottomTabScreen"
          component={BottomTabScreen}
          options={{headerShown: false}}
        />
        <RootStack.Screen name="Setting" component={Setting} />
        <RootStack.Screen name="Address" component={Address} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default Router;
